﻿<html>
<head><meta charset="utf-8"><title>demo</title></head>

<body>
<style>
.noborder{border:groove;background-color:#999;width:500px;}
.divWithCanvas{background-color:#fff;width:100%;height:300px;}
</style>

<div class="noborder"><p>
<div class="divWithCanvas" id="containerView"><canvas id="webglView" style="width:100%;height:100%"></canvas></div><br>

<input type="button" value = "Origin" title="绘制原图" onclick="renderOrigin()">
<input type="button" value = "Inverse" title="绘制反色" onclick="renderInverse()">
<input type="button" value = "Emboss" title="绘制浮雕" onclick="renderEmboss()">
<input type="button" value = "Edge" title="绘制边缘" onclick="renderEdge()">
<input type="button" value = "Wave" title="绘制波纹" onclick="renderWave()">
</p></div>
<script id="vsh_lesson3" type="x-shader/x-vertex">
precision mediump float;
attribute vec4 position;
attribute vec4 inputTextureCoordinate;
varying vec2 textureCoordinate;
void main()
{
	gl_Position = position;
	// 这是一种取巧的做法，强行把顶点坐标映射为纹理坐标，
	// 但是仅适用于本章用到的刚好占满整个viewport的顶点哦。
	textureCoordinate = vec2((position.x+1.0)/2.0, 1.0-(position.y+1.0)/2.0);
}
</script>

<script id="fsh_origin" type="x-shader/x-fragment">
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
void main()
{
	gl_FragColor = texture2D(inputImageTexture, textureCoordinate);
}
</script>
<script id="fsh_inverse" type="x-shader/x-fragment">
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
void main()
{
	gl_FragColor = vec4(1.0 - texture2D(inputImageTexture, textureCoordinate).rgb, 1.0);
}
</script>
<script id="fsh_emboss" type="x-shader/x-fragment">
//浮雕效果:
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform vec2 steps;
const float stride = 2.0;
void main()
{
    
    vec3 tmpColor = texture2D(inputImageTexture, textureCoordinate + steps * stride).rgb;
    tmpColor = texture2D(inputImageTexture, textureCoordinate).rgb - tmpColor + 0.5;
    float f = (tmpColor.r + tmpColor.g + tmpColor.b) / 3.0;
    gl_FragColor = vec4(f, f, f, 1.0);
}
</script>
<script id="fsh_edge" type="x-shader/x-fragment">
//显示边缘：
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform vec2 steps;

const float stride = 1.0;

void main()
{
    
    vec3 tmpColor = texture2D(inputImageTexture, textureCoordinate + steps * stride).rgb;
    tmpColor = abs(texture2D(inputImageTexture, textureCoordinate).rgb - tmpColor);
    gl_FragColor = vec4(tmpColor * 2.0, 1.0);
}
</script>
<script id="fsh_wave" type="x-shader/x-fragment">
//波纹：
precision mediump float;
varying vec2 textureCoordinate;
uniform sampler2D inputImageTexture;
uniform float motion;
uniform float angle;

void main()
{
    vec2 tmp = textureCoordinate;
    tmp.x = tmp.x + 0.01 * sin(motion +  tmp.x * angle);
    tmp.y = tmp.y + 0.01 * sin(motion +  tmp.y * angle);
    gl_FragColor = texture2D(inputImageTexture, tmp);
}
</script>
<script src="functions_lesson_3.js"></script>
<div style="display:none"><img src="vocaloid.jpg" id="vocaloid"></div>
</body>
</html>